/*
Theme Name:runoob
Theme URI:http://www.runoob.com/
Version:1.0
*/
a,abbr,address,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,label,legend,li,object,ol,p,pre,q,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,ul{border:0;margin:0;padding:0}
blockquote{background-color:#f3f7f0;padding:10px;margin:10px;font-size:13px;line-height:2em}
article,aside,figcaption,figure,figure img,footer,header,hgroup,nav,object,section,video{display:block}
div#htmlfeedback-container *{margin:0;padding:0}
div#htmlfeedback-container{font-size:12px;background-color:#fff;border-left:1px solid #96b97d;border-top:1px solid #96b97d;position:fixed;right:0;bottom:0;z-index:5500;display:none}
div#htmlfeedback-container.expanded{width:400px}
div#htmlfeedback-container-more{padding:5px}
div#htmlfeedback-container span{display:block;max-width:200px}
div#htmlfeedback-container p{display:block;margin-bottom:5px;max-width:400px}
div#htmlfeedback-container h3{font-size:1.2em;margin-bottom:10px}
div#htmlfeedback-container form input[type=reset],div#htmlfeedback-container form input[type=submit]{padding-left:10px;padding-right:10px;margin-top:10px;height:30px;border:1px solid #fff;background-color:#96b97d;color:#fff;font-size:12px;font-weight:bold}
div#htmlfeedback-container form input[type=reset]:active,div#htmlfeedback-container form input[type=submit]:active{border:1px inset #5aa0b8}
div#htmlfeedback-container textarea{width:350px;height:140px;line-height:24px;float:left;padding:0 3% 0 3%;background-color:#fff;text-align:initial;border:1px solid #c8c8c8;border-radius:3px;overflow:hidden;font-size:1.2em;color:#000;margin-bottom:10px}
div#htmlfeedback-container .fb-guide{padding-top:10px;background-color:#f7f7f7;color:#9a9a9a;margin-left:-20px;padding-left:20px;border-right-width:0;margin-right:-20px;padding-right:25px;margin-bottom:-20px;padding-bottom:15px;margin-top:10px}
div#htmlfeedback-container .fb-email{line-height:34px;left:9px;top:0;text-align:initial;white-space:nowrap;right:9px;height:35px;width:90%;padding:0 3% 0 3%;background-color:#fff;border:1px solid #c8c8c8;border-radius:3px;color:#000;font-weight:400;font-size:1.2em}
div#htmlfeedback-container div#htmlfeedback-more{display:block;background-color:#96b97d;color:#fff;font-size:14px;font-weight:bold;padding:5px;cursor:pointer}
div#htmlfeedback-container div#htmlfeedback-more div#htmlfeedback-close{padding-right:5px;float:right}
div#htmlfeedback-container div#htmlfeedback-more div#htmlfeedback-close:hover{text-decoration:underline}
a img{border:0}
figure{position:relative}
figure img{width:100%}
.highLT{color:#170}
.highGT{color:#170}
.highCOM{color:#a50}
.highELE{color:#170}
.highATT{color:#00c}
.highVAL{color:#a11}
.row{width:100%;max-width:1260px;min-width:755px;margin:0 auto;overflow:hidden}
.col,.eightcol,.elevencol,.fifteencol,.fivecol,.fourcol,.fourteencol,.ninecol,.onecol,.sevencol,.sixcol,.tencol,.thirteencol,.threecol,.twelvecol,.twocol{margin-right:1%;float:left}
.onecol{width:4%}
.twocol{width:10.4%}
.threecol{width:16.8%}
.site-fix{position:fixed;top:0;bottom:0;z-index:666;min-height:0;overflow:hidden;background-color:#fff;border-color:#eee}
.site-fix:hover{overflow-y:scroll;overflow-x:hidden}
.site-fix-bottom{bottom:325px}
.fourcol,.runoob-col-md2{margin-right:1%;float:left;width:16%;display:block;box-sizing:border-box;border:1px solid #eee}
div.tutintro{width:auto;min-height:92px}
div.tutintro img{float:left;margin-right:20px;margin-bottom:10px}
.copyright,.fivecol{width:14%;box-sizing:border-box;float:left}
.listcol{width:27.6%;float:left}
.mediatemple{width:29.6%}
.footer-nav,.search,.sixcol{width:36%}
.middle-column-home{width:78%;margin-right:0;padding:12px 20px;border:1px solid #eaeaea;background-color:#fff;border-radius:4px}
.eightcol{width:48.8%}
.ninecol{width:55.2%}
.logo,.tencol{width:61.6%}
.elevencol,.middle-column{width:68%;box-sizing:border-box;float:left}
.twelvecol{width:74.4%;float:left}
.thirteencol{width:80.8%}
.fourteencol{width:87.2%}
.fifteencol{width:93.6%}
.nav,.nav-sub,.profile-bar,.row-login-desktop,.row-login-mobile,.sixteencol{width:100%;float:left}
.last{margin-right:0}
embed,img,object{max-width:100%}
img{height:auto}
.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
.example-btn{color:#fff;background-color:#5cb85c;border-color:#4cae4c}
.example-btn:hover{color:#fff;background-color:#47a447;border-color:#398439}
.example-btn:active{background-image:none}
pre{margin:15px auto;font:12px/20px Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;white-space:pre-wrap;word-break:break-all;word-wrap:break-word;border:1px solid #ddd;border-left-width:4px;background:#fbfbfb url(codecolorer_bg.gif) top;padding:10px 15px}
.right-list button{top:24px !important;margin-top:12px;display:none;background-color:#96b97d;float:right}
html{font-size:62.5%}
body{margin:0;font-size:1.2em;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:#f6f6f6 url(bg.gif) no-repeat;color:#333}
button,input,select,textarea{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
input[type=radio]{-webkit-appearance:radio}
h1,h2,h3,h4{font-size:1em}
.mobile-nav{display:none}
button,input,select,td,textarea,th{font-size:13px}
button,input,select,textarea{outline:0}
button:hover{cursor:pointer}
h1{margin:0 0 10px 0;font-size:2.1em;color:#64854c;text-decoration:none;text-indent:-9999px}
.logo h1{background-image:url(runoob-logo.png);background-repeat:no-repeat;text-indent:-9999px;width:258px;height:39px;margin-top:10px;margin-left:20px;display:block}
.logo a{width:258px;height:39px;display:block}
a{color:#64854c;text-decoration:none;-o-transition-duration:.2s;-o-transition-property:opacity;-webkit-transition-duration:.2s;-webkit-transition-property:opacity}
table a{text-decoration:underline}
a:hover{opacity:.8;color:#799961}
li,ol,p,ul{line-height:1.5em}
input[type=submit]{cursor:pointer;color:#fff;padding:7px 10px 7px 10px;-webkit-appearance:none;width:80px;margin:10px 0 0 0;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.2);border:1px solid rgba(87,121,63,.8);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:#90b575;-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);background-image:url();background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%);background-image:-o-linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%);background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%);background-image:linear-gradient(bottom,rgba(0,0,0,.15) -17%,rgba(255,255,255,.15) 117%)}
.socialicons input[type=submit]{width:18%;line-height:16px;margin:auto;float:right}
.container{padding-left:10px;padding-right:10px}
.main{margin-top:20px}
.footer{background:#fff;padding-top:20px;padding-bottom:20px;margin-top:20px;-moz-box-shadow:0 -1px 1px #ececec;box-shadow:0 -1px 1px #ececec}
.logo-search{margin-top:17px;margin-bottom:15px}
.navigation{background:#96b97d}
.sub-navigation{background:#fff;-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin-bottom:20px}
.sub-navigation-mobile{display:none}
.row-logo{margin-top:10px;margin-bottom:10px}
.logo img{padding:10px 0 0 20px}
.row-search-mobile{display:none}
.search{text-align:right}
.search form{background:#eeefed;padding:0;margin:0;padding:5px;border-radius:3px;margin:5px 0 0 0;text-align:center}
.search input{line-height:34px;left:9px;top:0;text-align:initial;white-space:nowrap;right:9px;height:35px;width:94%;padding:0 3% 0 3%;background-color:#fff;border:1px solid #c8c8c8;border-radius:3px;color:#ccc;font-weight:400;font-size:1.2em}
.search input:focus{color:#333;opacity:.8}
.nav .current{background-image:url(navarrow.png);background-repeat:no-repeat;background-position:center bottom}
.nav,.nav-sub,.profile-bar{padding:10px 0 0 20px;height:28px;font-size:1.2em;font-family:proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif}
.nav{text-transform:uppercase}
.nav ul,.nav-sub ul{list-style:none;white-space:nowrap}
.nav li,.nav-sub li{display:inline;margin:0 20px 0 0}
.nav li a,.nav-sub li a{padding:10px 0 10px 0;text-decoration:none}
.nav li a{color:#fff}
.nav li a:hover{color:#e3efd9}
.nav-sub li a{color:#333;font-weight:500}
.nav-sub li a:hover{color:#777}
hr{background-color:#d4d4d4;color:#d4d4d4;height:1px;border:0;clear:both}
.search-reveal{display:none}
.profile-bar{text-align:right;margin:0;padding:0}
.profile-nav{z-index:10000;position:relative;list-style:none;float:right;width:100%}
.profile-nav li{float:right;position:relative}
.profile-nav a{display:block}
span.deprecated{color:#e80000;background-color:transparent}
.welcome{margin:12px 10px 0 0;color:#fff;opacity:.5}
.article-body ul{line-height:140%}
.article-body ul.activity-dropdown li{text-align:left;border-bottom:1px solid #efefef;padding:10px 10px 10px 30px;background-color:#fff;background-repeat:no-repeat;background-position:left center;background-size:17px auto;margin:0}
.article-body ul.activity-dropdown li span{color:grey;float:right;font-size:.8em}
.article-body ul.activity-dropdown li img{width:30%;display:block;margin:20px 0 0 0}
.article-body h1{text-indent:initial}
.tab{padding-left:4px;font-weight:bold;display:block;font-size:1.2em;line-height:2.6em;font-family:proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;color:#64854c;text-shadow:0 1px 0 rgba(255,255,255,.15);border:1px solid rgba(0,0,0,.1);border-bottom:0;-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:#f2f2f2;background-image:url();background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);background-image:-o-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%);background-image:linear-gradient(bottom,rgba(0,0,0,.05) -17%,rgba(255,255,255,.05) 117%)}
.sidebar-box{background:#fff;margin:0 0 20px 0;padding:4px;-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}
.sidebar-box.cate-list{padding:0}
.sidebar-box .cate-items{overflow:hidden;padding-left:14px;text-align:center;padding-bottom:16px}
.sidebar-box .cate-items a{color:#999;background-color:#f6f6f6;float:left;width:31.3333%;margin:0 1% 1% 0;padding:0;font-size:12px;height:29px;line-height:29px;overflow:hidden}
.sidebar-box.about-author .article-body{padding:0}
.design a{line-height:24px;background-color:#f6f4f0;text-decoration:none;display:block;padding:4px;border-bottom:1px solid #efefef;color:#000;font-size:13px}
.design a:hover{font-weight:bold}
.codelist{overflow:hidden}
.codelist-mobile{display:none}
.codelist a{width:72px;margin:0 5px 8px 5px;float:left;text-align:center;color:#999;font-size:12px;height:65px;overflow:hidden;text-decoration:none}
.codelist a:hover{color:#64854c}
.codelist .codeicon{border-radius:5px;margin:0 auto;display:block;margin-bottom:5px}
.codelist a.item-top{width:28%;margin:0 8px 10px 0;text-align:left;height:80px;color:#bbb;background-color:#f6f6f6;border-radius:5px;padding:6px 16px}
.codelist a.item-top .codeicon{float:left;margin-left:10px;margin-right:10px}
.codelist a.item-top h4{color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left}
.codelist a.item-top strong{display:block;color:#666;text-align:left}
.codelist a.item-top:hover{background-color:#f1f1f1}
.codelist a.item-2 h4{color:#7ccd38}
.codelist a.item-3 h4{color:#52baf5}
.codelist h2{font-size:18px;font-weight:700;margin:12px 0;border-bottom:1px solid #eaeaea}
.navto-nav{cursor:pointer;margin:8px 2px;padding:0;font-size:14px}
.article{background:#fff;margin:0;border:1px solid #efefef;border-bottom:0;margin-bottom:20px}
.article-heading{background:#fbfbfb;border-bottom:1px solid #efefef;padding:20px 30px 20px 30px}
.article-heading-ad{max-height:98px;text-align:center;padding:4px}
.archive-options{background:#fff;border:1px solid #efefef;padding:20px;overflow:hidden}
.archive-options h2,.article-heading h2{font-size:2.6em;margin:0 0 .3em 0}
.article-body h2{font-size:1.8em;margin:2px 0;line-height:1.8em}
h2.left{color:#404040;background-color:#fff;font-size:120%;margin-bottom:4px;padding-bottom:0;margin-top:0;padding-top:0;font-weight:700}
span.left_h2{color:#64854c}
.chapter a:link{text-decoration:none;color:#64854c;background-color:transparent}
.chapter a:visited{text-decoration:none;color:#64854c;background-color:transparent}
.chapter a:hover{text-decoration:underline;color:#64854c;background-color:transparent}
.chapter a::active{text-decoration:none;color:#64854c;background-color:transparent}
div.chapter{font-size:140%;width:100%;line-height:40px;height:40px;margin-bottom:10px;border-bottom:solid 1px #eaeaea;padding-bottom:8px}
div.chapter div.prev{width:40%;float:left;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:10px}
div.chapter div.next{width:48%;float:right;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px}
div.example{width:98%;color:#000;background-color:#f6f4f0;background-color:#d0e69c;background-color:#dcecb5;background-color:#e5eecc;margin:0 0 5px 0;padding:5px;border:1px solid #d4d4d4;background-image:-webkit-linear-gradient(#fff,#e5eecc 100px);background-image:linear-gradient(#fff,#e5eecc 100px)}
div.example_code{line-height:1.4em;width:98%;background-color:#fff;padding:5px;border:1px solid #d4d4d4;font-size:110%;font-family:Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;word-break:break-all;word-wrap:break-word}
div.example_result{background-color:#fff;padding:4px;border:1px solid #d4d4d4;width:98%}
div.code{width:98%;border:1px solid #d4d4d4;background-color:#f6f4f0;color:#444;padding:5px;margin:0}
div.code div{font-size:110%}
div.code div,div.code p,div.example_code p{font-family:"courier new"}
div.tryit_ex{clear:both;width:600px;height:50px;margin-bottom:5px}
div.tryit_ex img{border:0;float:left;margin-right:10px}
div.tryit_ex h2{padding-top:5px}
table.browserref{border-collapse:collapse;width:100%}
table.browserref tr:nth-child(even){background-color:#f6f4f0}
table.browserref tr:nth-child(odd){background-color:#fff}
table.browserref tr.fixzebra{background-color:#f6f4f0}
table.browserref th{height:32px;background-repeat:no-repeat;background-position:center center;border:1px solid #d4d4d4;background-color:#fff;font-weight:normal;color:#555;padding:5px;vertical-align:middle}
table.browserref td{border:1px solid #d4d4d4;text-align:center;padding:5px;padding-top:7px;padding-bottom:7px;vertical-align:top}
.marked{padding:0.2em;margin:0;background-color:#eceae6;border-radius:3px;font-weight:bold;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace}
table.lamp{width:100%;padding:0;border:1px solid #d4d4d4}
table.lamp th{color:#000;background-color:#fff;padding:10px;padding-right:5px}
table.lamp td{padding:4px;padding-left:0;padding-right:10px;background-color:#fff}
table.tecspec td,table.tecspec th{border:1px solid #d4d4d4;padding:5px;padding-top:7px;padding-bottom:7px;vertical-align:top;text-align:left}
table.reference,table.tecspec{border-collapse:collapse;width:100%;margin-bottom:4px;margin-top:4px}
table.reference .fa{font-size:24px}
table.reference tr:nth-child(odd){background-color:#f6f4f0}
table.reference tr:nth-child(even){background-color:#fff}
table.reference tr.fixzebra{background-color:#f6f4f0}
table.reference th{color:#fff;background-color:#555;border:1px solid #555;font-size:13px;padding:3px;vertical-align:top;text-align:left}
table.reference th a:link,table.reference th a:visited{color:#fff}
table.reference th a:active,table.reference th a:hover{color:#ee872a}
tr td:first-child{min-width:25px}
table.reference td{line-height:2em;min-width:24px;border:1px solid #d4d4d4;padding:5px;padding-top:7px;padding-bottom:7px;vertical-align:top}
table.reference td.example_code{vertical-align:bottom}
table.summary{border:1px solid #d4d4d4;padding:5px;font-size:100%;color:#555;background-color:#fafad2}
h2.example,h2.example_head{color:#444;color:#617f10;background-color:transparent;margin-top:0}
h2.example{font-size:120%}
h2.example_head{font-size:140%}
h2.home{margin-top:0;margin-bottom:5px;font-size:120%;padding-top:1px;padding-bottom:1px;padding-left:1px;color:#900b09;background-color:#fff}
h2.tutheader{margin:0;padding-top:5px;border-top:1px solid #d4d4d4;clear:both}
.socialicons{height:30px;margin:10px}
.socialicons a{margin:0 8px 8px 0;width:30px;height:30px;float:left;display:block;text-indent:-9999px}
.subscribe-bd .placeholder{height:35px;margin:0;width:94%;padding:0 3% 0 3%;background-color:#fff;border:1px solid #c8c8c8;border-radius:3px;color:#ccc;font-weight:400;font-size:1.2em}
.socialicons .placeholder{height:30px;margin:0;width:60%;padding:0 3% 0 3%;background-color:#fff;border:1px solid #c8c8c8;border-radius:3px;color:#ccc;font-weight:400;font-size:1.2em}
a.showbtn,a.showbtn:link,a.showbtn:visited,a.tryitbtn,a.tryitbtn:link,a.tryitbtn:visited{display:inline-block;color:#FFF;background-color:#8ca86d;font-weight:bold;font-size:13px;text-align:center;padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:4px;text-decoration:none;margin-left:5px;margin-top:0;margin-bottom:5px;border-radius:2px;white-space:nowrap}
a.showbtn:active,a.showbtn:hover,a.tryitbtn:active,a.tryitbtn:hover{background-color:#9ab782;color:#fff}
a.playitbtn,a.playitbtn:link,a.playitbtn:visited{display:inline-block;color:#fff;background-color:#ffad33;border:1px solid #ffad33;font-weight:700;font-size:11px;text-align:center;padding:10px;padding-top:1px;padding-bottom:2px;text-decoration:none;margin-left:1px;border-radius:5px;white-space:nowrap}
a.playitbtn:active,a.playitbtn:hover{background-color:#fff;color:#ffad33}
a.tryitbtnsyntax:active,a.tryitbtnsyntax:hover,a.tryitbtnsyntax:link,a.tryitbtnsyntax:visited{font-family:verdana;float:right;padding-top:0;padding-bottom:2px;background-color:#90b575;border:1px solid #aaa}
a.tryitbtnsyntax:active,a.tryitbtnsyntax:hover{color:#90b575;background-color:#fff}
div.tutintro p{margin-top:0;font-size:14px}
.article-heading h3{font-size:1.5em;color:#ccc}
.article-body h3{font-size:1.4em;font-weight:700;margin:8px 0}
.article-body h3.heading{margin-top:0}
.article-heading h3 em{font-weight:400}
.article-body{padding:10px 10px 20px 10px}
.article-body h3.membership{font-size:1.6em;margin:0 0 20px 0}
.article-body h3.membership span{font-weight:400}
.article-body-green{background-color:#f8faf7;border-top:1px solid #ebebeb;border-bottom:1px solid #ebebeb}
.article-body-green #ds-form .field{background:#eaf1e6 !important}
.article-intro h1{margin:0 0 10px 0;font-size:2.1em;text-indent:initial;text-decoration:none;color:#000}
.article-intro h1 span{color:#64854c}
.article-intro .tutorialimage:nth-of-type(1){float:right;margin:0 0 20px 20px;width:50% !important;min-width:260px}
.previous-next-links{line-height:24px;overflow:hidden;padding:10px 30px 10px 30px;background:#fbfbfb;border-top:1px solid #efefef;border-bottom:1px solid #efefef;color:#8590a6;font-size:15px;border:1px solid #e7eaf1;box-shadow:0 1px 3px rgba(0,37,55,.05);box-sizing:border-box}
.previous-next-links a{color:grey}
.previous-design-link{float:left}
.next-design-link{float:right}
.article-body p{word-wrap:break-word;word-break:break-all;font-size:13px;line-height:2em;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif}
.big-middle-column{font-size:13px}
.article-body p a{text-decoration:underline}
.article-intro .featured-image{display:none}
.article-body li>a:visited{color:#EC4E20}
.article-body a{outline:none;color:#060;font-size:13px}
.article-body .quote,.article-body blockquote p{word-wrap:break-word;background:#f3f7f0;padding:4px;font-size:14px;font-style:italic;line-height:1.5em;font-weight:400 !important}
.article-body .blockquote-full{background:#f3f7f0;padding:20px;margin:0 0 1.5em 0;font-size:1.5em;font-style:italic;line-height:1.5em;font-weight:400 !important}
.article-body .pullquote-l{background:#f3f7f0;padding:20px;margin:0 1.5em 1em 0;font-size:1.5em;font-style:italic;line-height:1.5em;float:left;width:30%}
.article-body .pullquote-r{background:#f3f7f0;padding:20px;margin:1.5em 0 1.5em 1.5em;font-size:1.5em;font-style:italic;line-height:1.5em;float:right;width:30%}
.article-body .wp-caption{width:100% !important}
.article-body .caption,.article-body .wp-caption-text{padding:20px;margin:0 0 1.5em 0;font-style:italic;font-weight:400 !important;border-bottom:1px solid #f1f1f1;font-size:1.2em !important;line-height:1.5em;color:#ccc}
.article-body .size-full{max-width:100%}
.article-body .two-column{-moz-column-count:2;-moz-column-gap:2em;-webkit-column-count:2;-webkit-column-gap:2em;margin:0 0 1.5em 0}
.article-body ol,.article-body ul,.sidebar-box ul{margin:0;padding:0;list-style-type:none}
.article-body ol li,.article-body ul li{font-size:13px;word-break:break-all}
.article-body ul li p{padding:0 10px}
.article-body ol li{list-style-type:decimal;margin:0 0 1em 2.5em;padding:0}
.article-body ol,.article-body ul{margin-top:1em;margin-bottom:1em}
.article-body .caption-right{display:block}
.sidebar-box.sidebar-cate{padding:0;margin:0;background-color:#f6f4f0}
.sidebar-tree{border:1px solid #fff;margin:0;padding:0}
.sidebar-tree .titlebar{height:30px;line-height:30px}
.sidebar-tree .titlebar h3{margin:0;color:#67ad03;text-align:center}
.sidebar-tree ul{padding:0;margin:0}
.sidebar-tree ul li{height:26px;line-height:26px;padding:5px 2px;position:relative;cursor:pointer;display:block;border-bottom:1px solid #fff;background-image:none;margin:0 0 0 1em}
.sidebar-tree ul li .tit{display:block;font-weight:700}
.sidebar-tree ul li ul{position:absolute;background:#f6f4f0;right:100%;top:0;display:none;float:left;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-tree ul li ul{padding:0 10px}
.sidebar-tree ul li ul li i{color:#666;font-size:11px;padding:0 10px}
.sidebar-tree ul li.selected{z-index:99;position:relative}
.sidebar-tree ul li.selected .h2-tit{position:absolute;z-index:88;background-color:#f6f4f0;border-left:0;width:100%;height:100%;line-height:24px;color:#64854c}
.sidebar-tree a{color:#000;text-decoration:none}
.sidebar-tree a:hover{color:#000;text-decoration:underline}
.sidebar-tree a:active{color:#000}
.content-ad-728{padding:1em 0 1em 0;margin:1em 0 2em 0;border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1}
.lower-ad-block{float:none !important;margin:0 !important}
#ds-form{overflow:hidden;margin:30px 0 0 0}
#ds-form.submit{margin-top:0}
#ds-form label{width:14%;float:left;margin:0 0 20px 0;padding:0;height:35px;line-height:3.4em;font-size:1.2em}
#ds-form .input-text,#ds-form input[type=password],#ds-form input[type=text],#ds-form select{width:94%;float:left;padding:0 3% 0 3%;background-color:#fff;border:1px solid #c8c8c8;border-radius:3px;color:#888;font-weight:400;font-size:1.2em;height:35px;overflow:hidden}
#ds-form input[type=checkbox]{-webkit-appearance:checkbox}
#ds-form .input-text{border:0;padding-top:10px;height:28px}
#ds-form textarea{height:150px;padding-top:10px;padding-bottom:10px}
#ds-form input[type=file]{padding:10px 3% 0 3%;height:28px}
#ds-form .field{background:#f6f6f5;padding:5px;border-radius:3px;overflow:hidden;width:80%;margin:0 0 20px 0}
#ds-form textarea{line-height:1.5em}
#ds-form input:focus,#ds-form textarea:focus{color:#111;opacity:.7}
#ds-form .hidden-category{display:none}
#ds-form .show-category{display:block}
.field-info{margin:10px 0 5px 15px;float:left;color:#111;opacity:.5}
.error,.success{padding:10px;color:#fff;font-weight:700;font-size:1.2em;margin:0 0 20px 0}
.error{background-color:#b97d7d}
.error p{margin:0;padding:0;font-size:1em}
.success{background-color:#96b97d}
.archive-list .categories{white-space:nowrap}
.article-feature-home{background:#fff;margin:0 0 20px 0;border:1px solid #efefef}
.article-feature-heading{background:#fbfbfb;border-bottom:1px solid #efefef;padding:20px}
.article-feature-body{padding:20px}
.article-feature-body .tutorialimage{display:none}
.article-feature-heading h2{margin:0 0 10px 0;font-size:1.8em}
.article-feature-heading h3{font-size:1.2em;color:#666;font-weight:400}
.article-feature-home p{margin:0 0 20px 0;font-size:1.2em}
.article-feature-home p:last{margin:0}
.home_feature_thumbnail{margin:0 0 20px 0}
.archive-list{background:#fff;margin:0 0 20px 0;border:1px solid #efefef;overflow:hidden}
.archive-list-item:nth-child(even){background:#fbfbfb;border-top:1px solid #efefef;border-bottom:1px solid #efefef}
.archive-list-item{padding:20px;overflow:hidden}
.archive-list-item h2{font-weight:700;margin:0 0 10px 0;font-size:1.2em}
.archive-list-item p{margin:0 0 10px 0}
.archive-list-item .tutorialimage{display:none}
.author-archive-profileimage{float:right;margin:0 0 20px 20px}
.author-archive-intro h2{margin:0 0 10px 0}
.article-body .author-social-links li{height:30px;padding:10px 0 0 40px;margin:0}
.left-column .gallery-list .design img{margin-bottom:10px}
.image-layout-style{background:0}
.archive-list .archive-list-item img{float:left;margin:0 20px 10px 0;width:90%}
.home-latest-articles .archive-list-item img{float:right !important;margin:0 0 10px 20px;width:35%}
.archive-list-item .colors a{display:block;float:left;text-indent:-9999px;width:10px;height:10px;border-radius:10px}
.archive-list-item img.wp-post-image{max-height:109px;float:left;width:25%}
.archive-list-item .post-intro{float:right;width:70%}
.archive-gallery .archive-list-item img.gallery-image{float:left;width:47%}
.archive-gallery .archive-list-item .design-information{float:right;width:47%}
.image-layout-style{background:0;border:0}
.image-layout-style .archive-list-item{width:47.5%;float:left;overflow:hidden;background:#fbfbfb;border:0 solid #efefef;margin:0 1% 10px 0;padding:1%}
.image-layout-style .author,.image-layout-style .categories,.image-layout-style .colors,.image-layout-style .date,.image-layout-style h2,.image-layout-style p{display:none}
.image-layout-style .archive-list-item img{display:block;width:100% !important;margin:0}
.image-layout-style .image-alternative{width:90%;padding:15% 5% 15% 5%;height:50px;text-indent:0;color:#333;font-weight:700;font-size:1.4em;background-image:none}
.image-layout-style .archive-list-item:nth-child(even){margin:0 0 10px 0}
.gallery-layout-toggle{margin-top:24px}
.archive-options .choose-color{overflow:hidden}
.archive-options .choose-color a{display:block;float:left;text-indent:-9999px;width:15px;height:15px;margin:0 5px 5px 0;border-radius:15px}
.archive-options .choose-color a.remove_filter{color:#64854c;text-indent:0}
.design-image img,.design-image-detail img,.gallery-image{-webkit-box-shadow:rgba(0,0,0,.246094) 0 1px 2px 0,transparent 0 0 0 0,transparent 0 0 0 0;border-radius:3px;border-style:solid;border-width:3px;border-color:#fff;box-shadow:rgba(0,0,0,.246094) 0 1px 2px 0,transparent 0 0 0 0,transparent 0 0 0 0;box-sizing:border-box;outline-color:#585652;outline-width:0}
.team-member{width:30%;margin:0 3% 0 0;float:left;overflow:hidden}
.team{overflow:hidden}
.team-member img{width:100%;margin:0 0 20px 0}
.team-member h3{font-size:1.6em;margin-top:0}
.membership-benefit{width:30%;margin:0 3% 0 0;float:left;overflow:hidden;text-align:center}
.membership-benefits{overflow:hidden}
.membership-benefit img{width:100%;margin:0 0 20px 0}
.membership-benefit h3{font-size:1.6em;margin-top:0;font-weight:400}
.membership-benefit p{color:#555}
.profile-intro{overflow:hidden}
.profile-intro h2{margin:0 0 10px 0}
.profile-intro h3{font-size:1.4em;font-weight:400;margin:0 0 10px 0}
.profile-intro h3 a{color:#ccc}
span.accepted,span.pending,span.rejected{text-transform:uppercase;font-size:.8em;padding:3px 6px 3px 6px;margin:0 0 0 5px}
span.pending{background:#f7e8c4}
span.rejected{background:#efd4d4}
span.accepted{background:#d9e8cf}
.design-image{background:#fbfbfb;padding:20px 0 20px 0;width:100%;text-align:center;border-bottom:0}
.design-image img{width:94%}
.design-image-detail{overflow:hidden;background:#fdfdfd;margin:0 0 20px 0;padding:20px 0 20px 0;width:100%;text-align:center}
.design-image-detail img{width:44%;margin:0 3% 0 3%;float:left}
.design-details{overflow:hidden}
.design-description{width:45%;margin:0 5% 0 0;float:left;min-width:198px}
.design-meta{width:45%;float:left;min-width:198px}
.design-page .author,.design-page .categories,.design-page .design-colors,.design-page .rating{border-bottom:1px solid #efefef;width:100%;padding:10px 0 10px 25px;margin:0;display:block}
.related-designs{overflow:hidden}
.related-designs img{width:30%;margin:5px 3% 5px 0;float:left}
.article-body .star-rating li{display:inline;margin:0;padding:0}
.star-rating .current-rating,.star-rating a{position:absolute;top:0;left:0;text-indent:-1000em;height:17px;line-height:17px;outline:0;overflow:hidden;border:0}
.star-rating a:active,.star-rating a:focus,.star-rating a:hover{background-position:left bottom}
.star-rating a.one-star{width:10%;z-index:11}
.star-rating a.two-stars{width:20%;z-index:10}
.star-rating a.three-stars{width:30%;z-index:9}
.star-rating a.four-stars{width:40%;z-index:8}
.star-rating a.five-stars{width:50%;z-index:7}
.star-rating a.six-stars{width:60%;z-index:6}
.star-rating a.seven-stars{width:70%;z-index:5}
.star-rating a.eight-stars{width:80%;z-index:4}
.star-rating a.nine-stars{width:90%;z-index:3}
.star-rating a.ten-stars{width:100%;z-index:2}
.star-rating .current-rating{z-index:1;background-position:left center;background-size:auto}
span.new{float:right;color:#fff;background-color:#90b575;font-weight:700;padding-left:1px;padding-right:1px;border:1px solid #fff;outline:1px solid #90b575;line-height:16px}
.sidebar-box table{width:100%;margin-top:10px}
.sidebar-box td,.sidebar-box td.key{padding:5px 20px 5px 0;vertical-align:middle;font-size:1em;color:grey}
.sidebar-box td.key{color:#000}
.sidebar-box tr{border-bottom:1px solid #efefef;display:block}
.sidebar-box table td:nth-child(odd){width:30px}
.sidebar-box td.step{width:40px !important}
.archive-gallery .archive-list-item img{width:45%}
#wp_page_numbers{overflow:hidden}
#wp_page_numbers ul{margin:0;padding:0 0 20px 0;width:auto}
#wp_page_numbers li{display:block;float:left;text-align:center}
#wp_page_numbers li a{background-color:#fbfbfb;text-decoration:none;padding:3px 8px 3px 8px;display:block;float:left;margin:0 5px 5px 0;text-align:center;border:1px solid #fbfbfb;color:#acacac;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
.gallery-list{padding:0}
.design{padding:4px;margin:0;overflow:hidden}
.design img{margin:0 0 5px 0}
.design:nth-child(even){background:#fbfbfb;border-top:1px solid #efefef;border-bottom:1px solid #efefef}
.design .author{margin:2px 0 0 0}
.swatch{background:#e9e9e9;float:right;padding:0 2px 0 2px}
.swatch a{width:11px;height:11px;text-indent:-9999px;float:left;margin:4px 3px 4px 3px}
.recent-members .member{height:60px}
.recent-members img{float:left;margin:0 15px 0 0;width:40px;height:40px}
.re-box{margin:0;padding:0;text-align:center}
.re-box-large{background-color:#fff}
.re-box-premium{background-color:#efefef}
.ad-336280{width:360px;margin:0 auto;text-align:center;overflow:hidden;padding:8px}
.re-600160{width:100%;margin:0 auto;text-align:center;overflow:hidden;padding:2px}
.ad-premium{width:260px;margin:0 auto;text-align:center;overflow:hidden}
.qqinfo{text-align:center;border-top:1px solid #efefef;padding-top:4px}
.qqinfo span{display:inline-block;white-space:nowrap;text-align:center}
.recommend-here{margin:0 auto 10px auto;padding:0 19px 10px 19px;background-color:#e9e9e9;text-align:center;overflow:hidden}
.recommend-here a{width:100%;background:#efefef;display:block;padding:5px 0 5px 0;color:#ccc}
.recommend-here.list-link a{color:#64854c;font-weight:700;font-size:16px}
ul.membership{list-style:none;margin:10px 0 0 0;padding:0 14px 14px 14px}
#ds-form input.button-green:active,.button-green:active{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
#ds-form input.button-brown:active,.button-brown:active{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
.footer span{padding:10px 0 0 0;color:#929292}
.footer a,.footer p{margin:0 0 10px 0}
.footer a{color:#6a6a6a}
ul.st-autocomplete{z-index:2;background-color:#fff;border:1px solid #c8c8c8;-webkit-border-radius:3px;display:block;list-style-type:none;margin:0;padding:0;position:absolute;top:34px;font-size:1em;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
ul.st-autocomplete li{border-top:1px solid #efefef;cursor:pointer;padding:10px 10px 10px 20px;overflow:hidden}
ul.st-autocomplete li:first-child{border-top:0}
ul.st-autocomplete li.active{background:#fbfbfb}
ul.st-autocomplete li p{margin:0}
ul.st-autocomplete li .sections .section{display:inline}
ul.st-autocomplete em{font-style:normal;background-color:transparent}
ul.st-autocomplete li.active em{font-weight:700}
.imgset{float:left;border:0;margin-right:6px}
.serieslist-content{font-size:1.2em;color:#000;text-align:left}
.serieslist-box{background:#fff;width:90%;padding:6px;margin:10px auto 0 auto;border:1px solid #1e3a96;border-bottom:2px solid #1e3a96}
html>body .serieslist-box{height:auto}
.seriestitle{margin:10px 0 20px 10px;font-size:1.4em;font-weight:700}
.seriestitle span{font-color:#000;font-style:italic}
ul.serieslist-ul{margin:0;padding:0;list-style-type:none}
li.serieslist-li{margin:0;padding:0}
.seriesbox{display:inline-block;background:#f3f7f0;width:100%;text-align:left;padding:6px 6px 12px 6px;min-width:125px}
.seriesbox img{margin:0 12.5px 0 12.5px}
h3.series-title-post-page{font-size:1.1em;color:#1e3a96;text-align:center}
p.series-description{font-style:italic}
.seriesmeta{background-color:#e5f3ff;font-size:.8em}
.series-nav-left{float:left}
.series-nav-right{float:right}
#footer{min-width:100%;margin-top:20px !important}
#footer .runoob-block{background:#fff;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;padding-bottom:50px}
#footer .runoob-block .runoob{width:64%;margin:0 auto;min-height:200px}
#footer .runoob dl{width:15%;padding-left:30px;color:gray;margin:25px 0;float:left;border-left:1px solid #e4e4e4;min-height:175px}
#footer .runoob dl dt{font-size:14px;color:#666;font-weight:500}
#footer .runoob dl dd{font-size:12px;margin-top:10px}
#footer .runoob a{color:gray;padding-left:5px}
#footer .runoob a:hover{color:#35b558}
#footer .search-share{width:16%;float:left;min-height:226px;border-left:1px solid #e4e4e4;padding:20px 0 0 40px}
#footer .copyright{font-size:12px;color:#999;margin:0 auto;width:100%;text-align:center;padding:20px 0}
#footer .copyright a{color:#999}
#footer .copyright a:hover{color:#35b558}
.fade.in{opacity:1}
.panel-modal{position:absolute}
.fixed-btn .modal.fade.in{top:auto;bottom:0;height:188px;width:128px;padding:10px;margin:0;right:65px;left:auto;text-align:center}
.fixed-btn .modal.fade.in h4{margin:0 0 10px;font-size:14px}
.fixed-btn .modal.fade.in:after,.fixed-btn .modal.fade.in:before{position:absolute;top:109px;right:-8px;content:'';display:inline-block;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:9px solid white}
.fixed-btn .modal.fade.in:before{right:-9px;border-left:9px solid #d9d9d9}
.fixed-btn{position:fixed;right:1%;bottom:5%;width:40px;border:1px solid #eee;background-color:white;font-size:24px;z-index:1040;-webkit-backface-visibility:hidden}
.fixed-btn a{display:inline-block;width:40px;height:40px;text-align:center}
.fixed-btn a:after{content:".";font-size:0;height:100%;display:inline-block;vertical-align:middle}
.fixed-btn a i{vertical-align:middle}
.fixed-btn .go-top{border-bottom:1px solid #eee}
.fixed-btn .writer{background-color:#96b97d;font-size:18px;color:white}
.fixed-btn .hide-go-top{display:none;opacity:0;filter:alpha(opacity=0)}
.modal.fade{-webkit-transition:opacity .3s linear,top .3s ease-out;-moz-transition:opacity .3s linear,top .3s ease-out;-o-transition:opacity .3s linear,top .3s ease-out;transition:opacity .3s linear,top .3s ease-out;top:-25%}
.modal.fade.in{top:10%}
.modal-header{padding:9px 15px;border-bottom:1px solid #eee}
.modal-header .close{margin-top:2px}
.modal-header h3{margin:0;line-height:30px}
.modal-body{position:relative;overflow-y:auto;max-height:400px;padding:15px}
.modal-form{margin-bottom:0}
.modal-footer{padding:14px 15px 15px;margin-bottom:0;text-align:right;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 white;-moz-box-shadow:inset 0 1px 0 white;box-shadow:inset 0 1px 0 white;*zoom:1}
.modal-footer:before,.modal-footer:after{display:table;content:"";line-height:0}
.modal-footer:after{clear:both}
.modal-footer .btn+.btn{margin-left:5px;margin-bottom:0}
.modal-footer .btn-group .btn+.btn{margin-left:-1px}
.modal-footer .btn-block+.btn-block{margin-left:0}
.hide{display:none}
.modal{background-color:white;border:1px solid #d9d9d9;font-size:14px;font-weight:normal;line-height:20px;position:fixed;top:10%;left:50%;z-index:1050;width:560px;margin-left:-280px;border:1px solid rgba(0,0,0,0.3);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);box-shadow:0 3px 7px rgba(0,0,0,0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:0}
.panel-modal .panel-body{overflow-y:auto;min-height:90px;max-width:150px}
.hl-default{color:#000}
.hl-code{color:Gray}
.hl-brackets{color:Olive}
.hl-comment{color:#a50}
.hl-quotes{color:#8b0000}
.hl-string{color:#a11}
.hl-identifier{color:#05a}
.hl-builtin{color:Teal}
.hl-reserved{color:Green}
.hl-inlinedoc{color:#00f}
.hl-var{color:#00008b}
.hl-url{color:#00f}
.hl-special{color:Navy}
.hl-number{color:Maroon}
.hl-inlinetags{color:#00f}
.hl-main{background-color:#fff;font-family:Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}
.hl-gutter{background-color:#999;color:#fff}
.hl-table{font-family:courier;font-size:12px;border:solid 1px #d3d3d3}
@media handheld,only screen and (max-width:1024px){.right-column{display:none}
.pc-nav{display:none}
.mobile-nav{display:inline-block;width:100%}
.middle-column-home{width:76%;margin-right:0}
.middle-column{width:76%;box-sizing:border-box;float:left}
.runoob-col-md2{width:22%}
.big-middle-column{width:100%}
.swatch{display:none}
.home_feature_thumbnail{width:43%;float:right;margin:0 0 20px 20px}
.sub-navigation-articles{display:none}
#footer .runoob-block{display:none}
#footer .copyright{background:#fff;padding-top:20px;padding-bottom:20px;margin-top:20px;-moz-box-shadow:0 -1px 1px #ececec;box-shadow:0 -1px 1px #ececec}
.codelist a.item-top h4{font-size:14px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.codelist a.item-top{width:40%}
}@media handheld,only screen and (max-width:768px){body{-webkit-text-size-adjust:none;-webkit-appearance:none}
.right-list button{display:block}
input[type=radio]{-webkit-appearance:"radio"}
.shortcuts .shortcut{width:22.4%}
.container,.row,body{min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.col,.eightcol,.elevencol,.fifteencol,.fivecol,.fourcol,.fourteencol,.ninecol,.onecol,.sevencol,.sixcol,.sixteencol,.tencol,.thirteencol,.threecol,.twelvecol,.twocol{width:auto;float:none;margin-left:0;margin-right:0}
.ad-336280{display:none}
.archive-options{display:none}
.runoob-col-md2{width:100%;display:none}
.right-column{display:none}
.middle-column,.middle-column-home{width:100%;box-sizing:border-box;float:left}
.re-box{margin:0;padding:10px}
.small-ads{margin:0;padding:10px}
.small-ads .bsap a{border:4px solid #ededed}
.small-ads .bsap .odd{margin:0 8px 8px 0}
.small-ads .bsap .even{margin:0 0 8px 0}
.small-ads .bsap a,.small-ads .bsap a img{width:88px}
.search{width:30%;float:right}
.logo{width:40%;float:left}
.codelist a.item-top strong{text-align:left}
.right-column{display:none}
}@media handheld,only screen and (max-width:480px){div.example_code{width:96%}
.shortcuts .shortcut{width:45%}
.ad-336280{width:100%;padding:0}
.search{width:100%;float:none}
.codelist-desktop{display:none}
.codelist-mobile{display:block}
.logo{width:80%;float:left}
.logo h1{background-size:198px 30px}
.sub-navigation{display:none}
.sub-navigation-mobile{display:block;width:90%;margin:0 auto}
.nav-sub-mobile{font-size:1.1em;font-family:proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0}
.mobile-nav-hidden{display:none;padding:10px 0 0 0;background:#fff;border-right:1px solid #efefef;border-left:1px solid #efefef}
.nav-sub-mobile ul{list-style:none}
.nav-sub-mobile li a{padding:5px 0 5px 20px;display:block;text-decoration:none}
.nav-sub-mobile li a:hover,.nav-sub-mobile li.current-cat a{background:#f1f1f1}
.nav-sub-mobile li a{color:#333}
.nav-sub-mobile li a:hover{color:#777}
.archive-list-item img.wp-post-image{float:right !important;margin:0 0 10px 20px}
.nav-submit{display:none}
.runoob-col-md2{display:none}
.right-column{display:none}
.nav li,.nav-sub li{margin:0 10px 0 0}
.logo,.search{text-align:center}
.row-search-mobile{margin:0 0 10px 0}
.search input{text-align:center}
.search input{height:30px}
.search-desktop{display:none}
.logo img{padding:5px 0 0 0}
.tab{margin:0 auto}
.archive-list-item img,.home_feature_thumbnail{width:50% !important}
.archive-gallery .archive-list-item img.gallery-image{display:inline-block;width:100% !important;float:none}
.archive-gallery .archive-list-item .design-information{width:100%;float:none}
.image-alternative{display:none}
.image-layout-style .image-alternative{display:block}
.middle-column-home{width:100% !important}
.archive-list-item .post-intro{float:none;width:100%}
.article-heading{padding-top:10px;padding-bottom:5px;padding-left:20px;padding-right:20px}
.article-body{padding-left:20px;padding-right:20px}
.article-body h2,.article-heading h2,.comments-heading h2{font-size:1.7em}
.article-body h3,.article-heading h3,.comments-body h3,.comments-heading h3{font-size:1.5em}
.article-heading h3{font-size:1.2em}
.article-body .quote,.article-body .quote-left,.article-body .quote-right{padding:10px;font-size:1.2em;float:none;width:auto;margin-left:0;margin-right:0}
.comments-heading h2{float:none}
.comments-heading h3{float:none}
.small-ads .bsap a,.small-ads .bsap a img{width:125px !important;text-align:center}
.image-layout-style .archive-list-item{width:94%;padding:3%}
.archive-layout-toggle,.gallery-layout-toggle{border-radius:3px;height:25px;opacity:.8}
.gallery-filter-color h3{margin-top:0}
.archive-options .archive-search{display:none}
.archive-options .archive-category select{height:27px}
.archive-options .archive-category{width:60%;margin:0}
.article-intro .tutorialimage:nth-of-type(1){float:none;width:90%;margin:0 0 20px 0}
.design-description{width:100%;margin:0}
.design-meta{width:100%}
.related-designs img{width:100%;margin:0 0 20px 0}
.article-body ul.activity-dropdown li{text-align:left;border-bottom:1px solid #efefef;padding:10px 10px 10px 30px;background-color:#fff;background-repeat:no-repeat;background-position:left center;background-size:17px auto}
.article-body ul.activity-dropdown li span{color:grey;display:block;float:none;font-size:.8em}
.article-body ul.activity-dropdown li img{width:100%;display:block;margin:20px 0 0 0}
.content-ad-728{display:none}
.lower-ad-block{display:none}
.membership-benefit{width:100%;margin:0;float:none;overflow:hidden;text-align:left;border-bottom:1px solid #efefef;margin:0 0 20px 0}
.membership-benefit img{float:right;width:25%}
#ds-form label{width:100%;margin:0 0 5px 0}
#ds-form .field{width:95%;margin:0 0 10px 0}
#ds-form .input-text,#ds-form input[type=password],#ds-form input[type=text],#ds-form select,#ds-form textarea{width:93%}
.team-member{width:100%;margin:0}
.team-member img{width:30%;margin:0 0 20px 20px;float:right}
.team-member h3{font-size:1.2em}
.codelist a.item-top .codeicon{display:none}
.codelist a.item-top strong{display:none}
.codelist a.item-top{width:28%;height:40px;color:#bbb;background-color:#f6f6f6;border-radius:5px;padding:0}
.codelist a.item-top h4{font-size:14px;text-align:center}
}@media only screen and (-webkit-min-device-pixel-ratio:2){.logo h1{background:url(runoob-logo@2x.png) no-repeat left center;background-size:258px 39px}
.socialicons .dribbble,.socialicons .email,.socialicons .facebook,.socialicons .fivehundredpx,.socialicons .googleplus,.socialicons .rss,.socialicons .twitter{-webkit-background-size:auto 30px;-moz-background-size:auto 30px;background-size:auto 30px}
.nav .current{background-image:url(navarrow@2x.png);-webkit-background-size:auto 8px;-moz-background-size:auto 8px;background-size:auto 8px}
}@media handheld,only screen and (max-width:400px){.logo h1{background:url(runoob-logo@2x.png) no-repeat left center;background-size:198px 30px}
}@media handheld,only screen and (max-width:1260px){.runoob-block{display:none}
#footer .copyright{background:#fff}
}.important{color:red;font-weight:bold}
.hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity:0.5;-moz-opacity:0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none}
.shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none}
.shang_box img{border:none;border-width:0}
.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition:all 0.3s}
.dashang:hover{opacity:0.8;padding:15px;font-size:18px}
.shang_close{float:right;display:inline-block}
.shang_logo{display:block;text-align:center;margin:20px auto}
.shang_tit p{color:#a3a3a3;text-align:center;font-size:16px}
.shang_info{clear:both}
.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em}
.note-body p,.note-body ul li{font-size:14px;line-height:2em}
@-webkit-keyframes fadeIn{from{opacity:0}
to{opacity:1}
}@keyframes fadeIn{from{opacity:0}
to{opacity:1}
}.wrapper{max-width:98%;margin:0}
.wrapper .search-input{box-sizing:border-box;background:#fff;width:100%;border-radius:5px;position:relative;box-shadow:0px 1px 5px 3px rgba(0,0,0,0.12)}
.search-input input{height:55px;width:94%;outline:none;border:none;border-radius:5px;padding:0 3% 0 3%;font-size:18px;box-shadow:0px 1px 5px rgba(0,0,0,0.1)}
.search-input.active input{border-radius:5px 5px 0 0}
.search-input .autocom-box{padding:0;opacity:0;pointer-events:none;max-height:280px;overflow-y:auto}
.search-input.active{padding:10px 8px;opacity:1;pointer-events:auto}
.search-input .icon{position:absolute;right:0px;top:0px;height:55px;width:55px;text-align:center;line-height:55px;font-size:20px;color:#64854c;cursor:pointer}
.autocomplete-items{padding:10px 8px;opacity:1;pointer-events:auto;border-bottom:none;border-top:none;z-index:99;top:100%;left:0;right:0}
.autocomplete-items div{padding:10px;cursor:pointer;background-color:#fff;border-bottom:1px solid #d4d4d4}
.autocomplete-items div:hover{background-color:#e9e9e9}
.autocomplete-active{background-color:DodgerBlue !important;color:#ffffff}
.quiz-container{padding:1em;max-width:100%;margin:1em auto}
.quiz-container a{text-decoration:none;color:#757575}
#quiz-header,#quiz-start-screen,#quiz-results-screen,#quiz-counter{text-align:center}
.question-container p{font-size:16px;font-weight:bold}
#quiz-controls{background:#F8FAF5 !important;border:1px solid #C4C4C4 !important;padding:5px !important;margin-bottom:15px !important;box-shadow:1px 1px 2px #AAA !important;text-align:center}
#quiz-response{font-size:14px;color:#757575}
#quiz-results{font-size:1.25em}
#quiz-buttons a,.quiz-container .quiz-button{display:inline-block;padding:0.5em 1em;background:#96b97d;color:#fff;border-radius:4px}
#quiz-buttons a{background:#96b97d;color:#fff}
.quiz-results-state #quiz-controls{background:none;padding:0}
.quiz-results-state #quiz-buttons a{background:#96b97d;color:#fff}